<template>
	<el-dialog v-model="showModal" class="peak-dialog" :close-on-click-modal="false" :title="title" :width="1000">
		<el-form ref="paramsFormRef" class="params-form" :inline="true" label-position="right" label-width="100px" :model="paramsForm" :rules="paramsRules">
			<el-row :gutter="16" justify="start">
				<el-col :span="12">
					<el-form-item class="form-item" label="大屏名称:" prop="fullName">
						<el-input v-model="paramsForm.fullName" placeholder="请输入大屏名称" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="大屏路径:" prop="boardCode">
						<el-input v-model="paramsForm.boardCode" placeholder="请输入大屏路径" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="大屏权限:" prop="boardPower">
						<el-input v-model="paramsForm.boardPower" placeholder="请输入可视化权限标识" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="组件状态:" prop="status">
						<el-select v-model="paramsForm.status" class="el-form-item">
							<el-option label="启用" :value="1" />
							<el-option label="停用" :value="0" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item class="form-item" label="是否默认:" prop="defaultFlag">
						<el-select v-model="paramsForm.defaultFlag" class="el-form-item">
							<el-option label="是" :value="1" />
							<el-option label="否" :value="0" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item class="form-item" label="缩略图:" prop="imgUrl">
						<UploadPictureCard ref="uploadRef" v-model="paramsForm.imgUrl" :params="{ bucketName: 'public-images' }" :limit="1" />
					</el-form-item>
				</el-col>

				<el-col :span="24">
					<el-form-item class="form-item" label="备注:" prop="bak">
						<el-input v-model="paramsForm.bak" rows="3" type="textarea" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleCancel">取 消</el-button>
				<el-button type="primary" @click="handleSure">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script setup>
import global from '@/utils/global'
import UploadPictureCard from '@/components/UploadPictureCard.vue'

const emit = defineEmits(['peak-modal-ok'])

const state = reactive({
	showModal: false,
	paramsFormRef: null,
	title: '',
	paramsForm: {
		fullName: '',
		boardCode: '',
		boardPower: '',
		status: 1,
		defaultFlag: 0,
		bak: '',
	},
	paramsRules: {
		fullName: [{ required: true, message: '请输入大屏名称', trigger: 'blur' }],
		boardCode: [{ required: true, message: '请输入大屏路径', trigger: 'blur' }],
		imgUrl: [{ required: true, message: '请上传缩略图', trigger: 'change' }],
	},
	uploadRef: null,
})

const { showModal, uploadRef, paramsFormRef, title, paramsForm, paramsRules } = toRefs(state)

const handleSure = () => {
	state.paramsFormRef.validate(valid => {
		if (valid) {
			handleSureOk()
		} else {
			return false
		}
	})
}
const handleSureOk = () => {
	if (state.paramsForm.id) {
		//编辑
		global.$fetchPostData(`/meta-system/web/v1/screenBoard/update`, state.paramsForm).then(data => {
			if (data.code == 200) {
				state.showModal = false
				emit('peak-modal-ok', 2)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	} else {
		global.$fetchPostData(`/meta-system/web/v1/screenBoard/add`, state.paramsForm).then(data => {
			if (data.code == 200) {
				state.showModal = false
				emit('peak-modal-ok', 1)
			} else {
				global.$baseMessage(data.msg, 'error')
			}
		})
	}
}
const handleCancel = () => {
	state.showModal = false
}
const handleShowModal = async row => {
	state.showModal = true
	await nextTick()
	state.paramsForm.id = ''
	state.paramsFormRef.resetFields()
	state.uploadRef.handleResetValue()
	if (row) {
		state.title = '编辑大屏'
		getDataDetail(row.id) //编辑
	} else {
		state.title = '新增大屏'
	}
}
const getDataDetail = id => {
	global.$fetchGetData(`/meta-system/web/v1/screenBoard/detail/${id}`, {}).then(data => {
		if (data.code == 200) {
			state.paramsForm = data.data || {}
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}
defineExpose({
	handleShowModal,
})
</script>
